<template>
    <nav>
        <ul>
            <li>
                <div id="boke">
                    <svg>
                        <use xlink:href="#icon-faxian-copy"></use>
                    </svg>
                </div>
                <span>我的播客</span>
            </li>
            <li>
                <div id="fenlei">
                    <svg>
                        <use xlink:href="#icon-yingyongzhongxin"></use>
                    </svg>
                </div>
                <span>全部分类</span>
            </li>
            <li>
                <div>
                    <svg>
                        <use xlink:href="#icon-shujiyuedu-copy"></use>
                    </svg>
                </div>
                <span>有声书</span>
            </li>
            <li>
                <div>
                    <svg>
                        <use xlink:href="#icon-paixingbang"></use>
                    </svg>
                </div>
                <span>排行榜</span>
            </li>
            <li>
                <div>
                    <svg>
                        <use xlink:href="#icon-yueliang"></use>
                    </svg>
                </div>
                <span>助眠解压</span>
            </li>
            <li>
                <div>
                    <svg>
                        <use xlink:href="#icon-diantai2"></use>
                    </svg>
                </div>
                <span>广播电台</span>
            </li>
        </ul>
    </nav>

</template>

<script>
    export default {
        name: "NavCom"
    }
</script>

<style scoped>
    nav{
        width: 100%;
        height: 100px;
        background: #fff;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    nav::-webkit-scrollbar{
        display: none;
    }
    ul{
        width: 540px;
        height: 100%;
        text-align: center;
    }
    li{
        width: 80px;
        height: 80px;
        float: left;
        margin-top: 10px;
    }
    div{
        width: 50px;
        height: 50px;
        background: red;
        border-radius: 50%;
        margin: 0 auto;
    }
    svg{
        width: 30px;
        height: 30px;
        margin-top: 10px;
    }
    span{
        font-size: 12px;
    }
    #boke{
        background: #fff;
        border: 1px solid red;
    }

</style>